<template>
	<view>
		<view class="topSticky">
			<u-tabs 
			:list="tagList"
			@click="articleChange"
		   lineWidth="30"
				lineColor="#67b1a0"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="width:300rpx; font-weight:bolder; height:60rpx; "
			></u-tabs>
		</u-col>
		</view>
		<view class="content flex">
			<view class="flex articleList" v-for="(item,i) in articleList" :key="i" @click="articleInfo" :data-id="item.id">
				<view>
					<u--image width="250rpx" height="250rpx" :src="item.image"></u--image>
				</view>
				<view class="articleInfo flex">
					<view class="title">{{item.title}}</view>
					<view class="flex articleCount">
						<view class="flex">
							<view class="count">{{item.show_count}} </view>
							<view> 浏览</view>
						</view>
						<view>{{item.createtime}}</view>
					</view>
				</view>
			</view>
		</view>
		<buttonNav :active="active"></buttonNav>
	</view>
</template>

<script>
	import http from '@/apis/http.js'
	import buttonNav from '@/components/bottomNav.vue';
	export default {
		components:{
			buttonNav
		},
		data() {
			return {
				active:1,
				page:0,
				activeId:15,
				tagList: [
					{'id':15,'name':'要闻'},
					{'id':16,'name':'攻略'},
				],
				articleList : []
			}
		},
		methods: {
			articleChange(t){
				this.activeId=t.id;
				this.page = 0;
				this.articleList = [];
				this.getArticleList(t.id)
			},
			getArticleList(cid){
				http.POST('article/list',{'categoryId':cid,'page':this.page}).then(res=>{
					if(res.code == 1){
						this.articleList.push(...res.data)
						// uni.navigateTo({
						// 	url:"/pages/article/info?id="+value
						// })
					}else{
						uni.showToast({
							'title':res.msg,
							'icon':'none'
						})
					}
				})
			},
			articleInfo(v){
				let id = v.currentTarget.dataset.id;
	
				uni.navigateTo({
					url:'/pages/article/info?articleId='+id
				})
			}
		},
		created() {
			this.getArticleList(this.activeId)
		},
		onReachBottom (){
			this.page++;
			this.getArticleList(this.activeId)
		}
	}
</script>

<style>
	.flex{display: flex;}
	.topSticky { padding:140rpx 0 15rpx 0;}
	.content {flex-direction: column; padding: 0 20rpx; padding-bottom: 160rpx;}
	.articleInfo { width: 100%; margin-left: 20rpx; padding: 20rpx; flex-direction: column; justify-content: space-between;}
	.articleCount {flex-direction:row; justify-content:  space-between; padding-right: 20rpx; color: #8f8f8f;}
	.title,.count { color: #1b1f20; font-weight: bold;}
	.articleList { border: 1px solid #eee; border-radius: 20rpx; margin-top: 20rpx; box-shadow: 3rpx #eeeeee;}
</style>
